---
type: tutorial
title: 准备开发环境
description: |-
  教程：搭建你的 Astro 博客 —
  安装本教程所需要的本地依赖
---
import Badge from '~/components/Badge.astro';
import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

<PreCheck>
  - 安装构建 Astro 过程中你可能用到的工具
</PreCheck>

## 获取所需的开发工具

### 终端

你将使用**终端**来创建你的 Astro 项目并运行命令来构建、开发和测试你的网站。

你可以通过操作系统的自带的终端程序访问命令行。常见的应用程序包括 **Terminal** (MacOS/Linux)、**命令提示符** (Windows) 和 **Termux** (Android)。其中一些可能已经在你的设备上了。

### Node.js

要在你的系统上运行 Astro，你还需要安装 [**Node.js**](https://nodejs.org/)，并且版本为 `v18.14.1` 或更高版本。

要检查是否已安装兼容版本，请在终端中运行以下命令：

```sh
node -v

// 输出示例
v18.14.1
```

如果该命令返回的版本号高于 `v18.14.1`，那么你就可以继续了！

如果命令返回错误消息，如 `Command 'node' not found`，或者版本号低于 `v18.14.1`，那么你需要[安装兼容的 Node.js 版本](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)。

### 代码编辑器

此外，你需要下载并安装**代码编辑器**来编写你的代码。

:::tip[我们将用到……]
本教程将使用 **VS Code**，但你可以使用适合你操作系统的任何编辑器。
:::

<Steps>
1. [下载并安装 VS Code](https://code.visualstudio.com/#alt-downloads) 或选择的其他代码编辑器。
</Steps>

<Box icon="question-mark">

### 小测试

下面哪个是……
1. 用于修改文件内容的代码编辑器？

    <MultipleChoice>
      <Option>
        浏览器
      </Option>
      <Option>
        终端
      </Option>
      <Option isCorrect>
        VS Code
      </Option>
    </MultipleChoice>

2. 在线的代码仓库和版本控制应用？

    <MultipleChoice>
      <Option isCorrect>
        GitHub
      </Option>
      <Option>
        终端
      </Option>
      <Option>
        VS Code
      </Option>
    </MultipleChoice>

3. 运行命令的应用程序？
    <MultipleChoice>
      <Option>
        GitHub
      </Option>
      <Option isCorrect>
        终端
      </Option>
      <Option>
        浏览器
      </Option>
    </MultipleChoice>

</Box>

<Box icon="check-list">

## 任务清单

<Checklist>
- [ ] 我可以在终端中访问命令行。
- [ ] 我安装了 Node.js。
- [ ] 我有一个像 VS Code 这样的代码编辑器。
</Checklist>
</Box>

### 相关资源

- <p>[FreeCodeCamp.org](https://freecodecamp.org) <Badge>外部链接</Badge> 一个免费提供 HTML、CSS、JS 等方面的完整课程和快速复习的教育网站。</p >
